<template>
	<div>
		<!--{{myValue}}-->
		<template v-if="type==1">
			<label class="input-single-checkbox" v-for="(item,index) of options">
				<input type="checkbox" :value="item.value" name="type" v-model="myValue"   />
				<div class="img"></div>
				<span>{{item.name}}</span>
			</label>
		</template>
		<template v-if="type==2">
			<label class="input-single-checkbox" v-for="(key,value) of options">
				<input type="checkbox" :value="value" name="type" v-model="myValue"  />
				<div class="img"></div>
				<span>{{key}}</span>
			</label>
		</template>

	</div>

</template>

<script>
	export default {
		props: {
			value: {
				default: false
			},
			options: {
				default: []
			}
		},
		data() {
			return {
				myValue: []
			}
		},
		watch: {
			myValue(val, oldVal) {
				console.log(val, oldVal);
				if(val) {
					this.$emit('input', val);
				}
			},
			value(val, oldVal) {
				if(val.length > 0 && oldVal.length == 0) {
					this.myValue = val;
				}

				if(val.length == 0 && oldVal.length > 0) {
					this.myValue = [];
				}

			}
		},
		computed: {
			type() {
				if(Array.isArray(this.options)) {
					return 1;
				} else {
					return 2;
				}
			}
		},
		methods: {
			select() {
				console.log(1)
				this.$emit('input', !this.value);
				this.$nextTick(() => {

					//					console.log(this.value)
				})
			}
		}
	}
</script>

<style lang="less">
	@import '../../less/base/base.less';
	.input-single-checkbox {
		position: relative;
		margin-right:38px;
		width: auto;
		display: inline-block;
		text-align: center;
		
		.img {
			width: 14px;
			height: 14px;
			background-image: url("./ic_selectbox_register_nor@2x.png");
			background-size: 100%;
			display: inline-block;
			vertical-align: middle;
			margin-right: 10px;
		}
		span {
			vertical-align: middle;
			font-size: 14px;
			color: @color-txt1;
		}
		input {
			position: absolute;
			width: 100%;
			height: 100%;
			opacity: 0.01;
			left: 0;
			top: 0;
		}
		input:checked+.img {
			background-image: url("./ic_selectbox_register_sel@2x.png");
		}
	}
</style>